<script lang="ts" setup>
// #region 引入包, 函数和组件
import { ref } from "vue"
import { bannerApi } from "@/services" // 轮播图接口
import { useMusicStore } from "@/store"
import type { BannerItem } from "@/services/type"

// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const music = useMusicStore()
// #endregion

// #region // 变量
const banners = ref<BannerItem[]>([])
// #endregion

// #region // 函数
// 获取banner图数据
const init = async () => {
  try {
    // 显示加载中
    music.changeLoading(true)
    // 调接口
    const res = await bannerApi()
    // console.log(res.banners)
    // 接受数据
    banners.value = res.banners
    // 隐藏加载中
    music.changeLoading(false)
  } catch (error) {
    console.log(error)
  }
}
// #endregion

// #region // 生命周期和vue函数
init()
// #endregion
</script>

<template>
  <view class="swiper_container">
    <swiper
      class="swiper_wrap"
      indicator-dots
      ndicator-color="#999"
      indicator-active-color="#eee"
      autoplay
      circular
    >
      <swiper-item v-for="item in banners" :key="item.imageUrl">
        <image :src="item.imageUrl" mode="widthFix"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<style lang="scss" scoped>
.swiper_container {
  padding: 30rpx;
  width: 100%;
  height: 256rpx;
  .swiper_wrap {
    overflow: hidden;
    width: calc(100% - 60rpx);
    height: 100%;
    border-radius: $uni-border-radius-lg;
  }
  image {
    width: 100%;
  }
}
</style>
